<template>
  <div class="my-card">
    <div class="order-extra-area">
      <div class="page-header q-pa-sm">Preview Form</div>
    </div>

    <q-card class="row no-bg" flat>
      <div class="col-6 p-status">
        <q-card-section>
          <div class="row p-status-field">
            <div class="col-12 fal q-pa-sm">
              <div class="weight">Status -</div>
              <div
                class="status-box"
                v-if="parts"
                :class="getStatusColor(parts?.last_status)"
              >
                <q-tooltip v-if="parts" class="bg-indigo" :offset="[10, 10]">
                  {{ parts.last_status }}
                </q-tooltip>
              </div>
            </div>
            <div class="col-12 fal q-pa-sm">
              <span class="weight"> Stock Code: </span>
              <div v-if="parts">
                {{ parts.stock_code }}
              </div>
            </div>

            <div class="col-12 fal q-pa-sm">
              <div class="weight">Serial No. :</div>
              <div v-if="parts">
                {{ parts.serial_no }}
              </div>
            </div>
            <div class="fal col-12 q-pa-sm">
              <div class="weight">Defit from Car:</div>
              <div v-if="parts">{{ parts.car }}</div>
            </div>
            <div class="fal col-12 q-pa-sm">
              <div class="weight">Workgroup:</div>
              <div v-if="parts">
                {{ parts.workgroup }}
              </div>
            </div>

            <div class="fal col-12 q-pa-sm">
              <div class="weight">System:</div>
              <div v-if="parts">{{ parts.system }}</div>
            </div>

            <div class="fal col-12 q-pa-sm">
                <div class="weight">Equipment:</div>
                <div v-if="parts">{{ parts.is_parent ? parts.lv4 : parts.lv5}}</div>
              </div>
          </div>
        </q-card-section>
      </div>

      <div class="col-6" v-if="parts && parts.lv5.length == 0">
        <PartsMap mode="part" :item="parts"></PartsMap>
      </div>
    </q-card>

    <q-card>
      <q-tabs
        v-model="tab"
        dense
        activeBgColor="white"
        indicator-color="primary"
        content-class="tabs-css"
        align="justify"
        style="background-color: #dae3f4"
        narrow-indicator
        no-caps
      >
        <q-tab style="width: 100px" name="now" label="Now" />
        <q-tab style="width: 100px" name="history" label="History" />
      </q-tabs>

      <q-separator />
      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="now" class="row" >
          <NowTable :part-id="part_id"></NowTable>
        </q-tab-panel>

        <q-tab-panel name="history" >
          <OrderHistoryTable
            v-if="parts"
            :is-parent="parts.is_parent"
            :serial_no="parts.serial_no"
            :stock-code="parts.stock_code"
          >
          </OrderHistoryTable>
        </q-tab-panel>
      </q-tab-panels>

      <q-card-actions class="q-pa-md justify-evenly col-12">
        <q-btn class="blue-btn" @click="goBack">Back</q-btn>
        <q-btn class="default-btn" @click="goCheckInOrder">Check In</q-btn>
      </q-card-actions>
    </q-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import NowTable from 'src/components/previewForm/NowTable.vue';
import { getStatusColor } from 'src/utils/getPublic';
import OrderHistoryTable from 'src/components/orderHistory/OrderHistoryTable.vue';
import { Parts } from 'src/services/type';
import { useRoute, useRouter } from 'vue-router';
import PartsMap from 'src/components/PartsMap.vue';
import { getPartDetailData } from 'src/services/partsService';
import { usePartsStore } from 'src/stores/partsStore';

const router = useRouter();
const route = useRoute();

const partsStore = usePartsStore();

const tab = ref('now');

function goBack() {
  router.go(-1);
}
const parts = ref<Parts>();
const part_id = parseInt(route.params.id as string);

function goCheckInOrder() {
  router.push(`checkInOrder/${part_id}`);
  partsStore.part_id = part_id;
  partsStore.getPart(part_id);
}

async function init() {
  const res = await getPartDetailData(part_id);
  if (res.data) {
    parts.value = res.data;
  }
}
init();
</script>

<style scoped>
.header {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 10px;
}

.now-parent {
  border-top: 1px solid #000;
  padding: 0;
}
.now-child {
  padding: 0.5rem;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  background-color: #d9d9d9;
}
/* .c-status-field {
  font-size: 20px;
  font-weight: 700;
  width: auto;
} */

.right-container {
  height: 170px;
  padding-top: 20px;
}
</style>
